<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的修饰符</title>
		<script src="../vue@3.2.23.js"></script>
		<style>
			.outer{
				width: 200px;
				height: 200px;
				background-color: black;
				margin: 30px;
			}
			.inner{
				width: 100px;
				height: 100px;
				background-color: aquamarine;
			}
			.inner_box{
				width: 50px;
				height: 50px;
				background-color: aliceblue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			
			<div class="outer" @click="myClick(1)">
				<div class="inner" @click.stop="myClick(2)">
					
				</div>
			</div>
			<form action="https://www.baidu.com" method="post">
				电话：<input type="text" name="phoneNum" v-model.lazy="phoneNum" :placeholder="placeHolder">
				年龄：<input type="text" name="age" v-model.lazy.number="age" >
				姓名：<input type="text" name="userName" v-model.trim="userName" >
				<input type="submit" value="" @click.prevent="mySubmit()"/>
			</form>
			<div class="outer" @click="myClick(1)">
				<div class="inner" @click.capture="myClick(2)">
					<div class="inner_box" @click.capture="myClick(3)">
						
					</div>
				</div>
			</div>
			<div class="outer" @click="myClick(1)">
				<div class="inner" @click.self="myClick(2)">
					<div class="inner_box" @click.once="myClick(3)">
						
					</div>
				</div>
			</div>
			<!-- 鼠标修饰符 -->
			<div class="outer" @click.left="myKeyDown()" ></div>
			<div class="outer" @click.right="myKeyDown()" ></div>
			<div class="outer" @click.middle="myKeyDown()" ></div>
			
			键盘修饰符<input type="text" @keydown.enter="myKeyDown()" />
		</div>
	</body>
</html>
<script>
	// 1.0表单修饰符
	// 1.1：.lazy懒加载
	// 1.2:.number，将输入内容自动转为数字类型
	// 1.3：.trim，去掉首尾空格
	// 2.0:事件修饰符
	// 2.1：.stop:防止事件冒泡
	// 2.2:.prevent:阻止默认事件
	// 2.3：.cupture:启用事件的捕获模式，优先执行被捕获的事件
	// 2.4:.self:当e.target等于本身对象时触发事件
	// 2.4:.once：事件只触发一次
	// click(.left/.right/.middle)鼠标的左右中键
	
	// 键盘事件
	const {createApp} = Vue;
	const app = createApp({
		data(){
			return{
				phoneNum:'',
				placeHolder:'请输入手机号',
				age:0,
				userName:''
			}
		},
		watch:{
			phoneNum(a,b){
				console.log(`修改前${b},修改后${a}`);
			}
		},
		methods:{
			myClick(val){
				console.log(val);
			},
			mySubmit(){
				console.log('表单数据全部校验完成');
			},
			myKeyDown(){
				console.log(123);
			}
		}
	});
	const vm = app.mount("#app")
</script>